<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To Do List</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div id="app">
        <header>
            <section>
                <h2>ToDoList</h2>
                <input type="text" placeholder="添加ToDo" id="add" v-model="ipt" @keyup.enter="putFn(ipt)">
            </section>
        </header>

        <main>
            <section>
                <!-- 正在进行的列表 -->
                <div class="toDoList">
                    <div class="title">
                        <h2>正在进行</h2>
                        <span class="toDoCount">{{ toDoCount }}</span>
                    </div>
                    <ul class="list">
                        <li v-for="(item,index) in list" v-show="!item.isdone">
                            <input type="checkbox" @click.prevent="toDoFn(item)">
                            <p>{{ item.txt }}</p>
                            <a @click="delFn(index)">-</a>
                        </li>
                    </ul>
                </div>

                <!-- 已完成的列表 -->
                <div class="doneList">
                    <div class="title">
                        <h2>已经完成</h2>
                        <span class="doneCount">{{ doneCount }}</span>
                    </div>
                    <ul class="list">
                        <li v-for="(item,index) in list" v-show="item.isdone">
                            <input type="checkbox" checked @click.prevent="isDoneFn(item)">
                            <p>{{ item.txt }}</p>
                            <a @click="delFn(index)">-</a>
                        </li>
                    </ul>
                </div>
            </section>
        </main>
    </div>

    <script src="../vue.js"></script>

    <script>
        let vw = new Vue({
            el: "#app",
            data: {
                // 输入内容文本
                ipt: '',
                // 待办事项数组
                list: []
            },
            // 计算完成数与未完成数
            computed: {
                toDoCount() {
                    let num = 0;
                    this.list.map(item => {
                        if (!item.isdone) {
                            num++;
                        }
                    });
                    return num;
                },
                doneCount() {
                    let num = 0;
                    this.list.map(item => {
                        if (item.isdone) {
                            num++;
                        }
                    });
                    return num;
                }
            },
            methods: {
                // 新增待办事项
                putFn(ipt) {
                    if (!this.ipt) {
                        alert("请输入内容")
                    } else {
                        this.list.push({
                            txt: this.ipt,
                            isdone: false
                        })
                    };
                    // 输入待办事项后清空输入框文本
                    this.ipt = "";
                },
                // 删除事项
                delFn(index) {
                    this.list.splice(index, 1);
                },
                // 点击完成键
                toDoFn(item) {
                    item.isdone = true;
                },
                // 点击完成事项按钮退回至未完成
                isDoneFn(item) {
                    item.isdone = false;
                }
            }
        })
    </script>
</body>

</html>